<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>新增课程</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/newCourse.css"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<!--		<p>这里是添加课程页面</p>-->
<!-- 一级容器，与其他框架（iframe , div）同级，装填以下div -->
<div id="addCourse" class="container-fluid">
    <!-- 第一步：填写课程信息 block or none -->
    <div class="step" :style="{display:stepOne}">
        <!-- 新增课程的进度样式 (①)======②======③ -->
        <div class="show_step">
            <div class="step_div">
                <div class="circle" style="border: 0; background-color: rgb(24,144,255);color: white;">1</div>
                <span class="step_info" style="font-weight: bold;color: black">基础信息</span>
            </div>
            <div class="as_line"></div>
            <div class="step_div">
                <div class="circle">2</div>
                <span class="step_info">课程内容</span>
            </div>
            <div class="as_line"></div>
            <div class="step_div">
                <div class="circle">3</div>
                <span class="step_info">课程设置</span>
            </div>
        </div>
        <!-- 填写信息 -->
        <div class="course_info">
            <!--上传图片封面-->
            <div class="info_input input_lg">
                <div class="input_name">封面图片:</div>
                <div class="input_body btnWrap">
                    <input @change="changeImg($event)" class="file" type="file">
                    <div class="upload ts"></div>
                </div>
            </div>
            <!--课程名称-->
            <div class="info_input">
                <div class="input_name">课程名称:</div>
                <div class="input_body">
                    <input class="form-control col-5" type="text" v-model="cname">
                </div>
            </div>
            <!--课程分类-->
            <div class="info_input">
                <div class="input_name">课程分类:</div>
                <div class="input_body">
                    <select class="form-control col-5" v-model="selected" @change="selectWho">
                        <option value="0">选择分类</option>
                        <option v-for="category in categories" :value="category.categoryId">{{category.categoryName}}
                        </option>
                    </select>
                </div>
            </div>
            <!--标签-->
            <div class="info_input">
                <div class="input_name">标签:</div>
                <div class="input_body">
                    <span id="addTag" @click="" data-toggle="modal" data-target="#add_tags"
                          style="color: rgb(24,144,255)">+添加标签</span>
                </div>
            </div>
            <!-- 模态框 -->
            <div class="modal fade" id="add_tags">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">

                        <!-- 模态框头部 -->
                        <div class="modal-header">
                            <h4 class="modal-title">添加标签</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>

                        <!-- 模态框主体 -->
                        <div class="modal-body form-group">
                            <p>标签名</p>
                            <input type="text" v-model="tagName">
                        </div>

                        <!-- 模态框底部 -->
                        <div class="modal-footer">
                            <button type="button" @keyup.enter="finishAddTag" class="btn btn-secondary"
                                    data-dismiss="modal">确认添加
                            </button>
                        </div>

                    </div>
                </div>
            </div>
            <!--模态框 end-->
            <!--课程性质-->
            <div class="info_input">
                <div class="input_name">课程性质:</div>
                <div class="input_body">
                    <input class="radio" name="series" type="radio" @change="check(0)">单课程
                    <input class="radio" name="series" type="radio" @change="check(1)">系列课程
                </div>
            </div>
            <!--讲师-->
            <div class="info_input">
                <div class="input_name">讲师:</div>
                <div class="input_body">
                    <select class="form-control col-5" @change="whichTeacher" v-model="selectedT">
                        <option value="0">选择讲师</option>
                        <option v-for="teacher in teachers" :value="teacher.tid">{{teacher.tname}}</option>
                    </select>
                </div>
            </div>
            <!--课程简介-->
            <div class="info_input input_lg">
                <div class="input_name">课程简介:</div>
                <div class="input_body">
                    <textarea class="form-control col-5" rows="3" v-model="description"></textarea>
                </div>
            </div>
            <button @click="gotoStepTwo" class="btn btn-primary" style="margin-left: 85px;">下一步</button>
        </div>
    </div>
    <!-- 第二步：添加课程内容 block or none -->
    <div class="step" :style="{display:stepTwo}">
        <!-- 新增课程的进度样式 ①======(②)======③ -->
        <div class="show_step">
            <div @click="gotoStepOne" class="step_div">
                <div class="circle" style="border: 0;">
                    <i class="fa fa-check-circle-o" style="font-size: 50px;color:rgb(24,144,255)"></i>
                </div>
                <span class="step_info" style="color: black">基础信息</span>
            </div>
            <div class="as_line" style="background-color:cornflowerblue;"></div>
            <div class="step_div">
                <div class="circle" style="border: 0; background-color: rgb(24,144,255);color: white;">2</div>
                <span class="step_info" style="font-weight: bold;color: black">课程内容</span>
            </div>
            <div class="as_line"></div>
            <div class="step_div">
                <div class="circle">3</div>
                <span class="step_info">课程设置</span>
            </div>
        </div>
        <!--内容填写-->
        <div class="course_info">
            <!--添加章节-->
            <div class="chapter_add">
                <div class="chapter_list">
                    <ul class="list-group">
                        <li v-for="(chapter,index) in chapters" class="list-group-item list-group-item-action"
                            style="padding: 0;">
                            <div class="chapter_name">{{index+1}}-{{chapter.cpname}}</div>
                            <span @click="delChapter(index)" style="font-size: 20px;" class="badge">&times;</span>
                        </li>
                    </ul>
                </div>
                <button class="btn btn-outline-primary butnlocation" data-toggle="modal" data-target="#addChapter">+
                    添加章节
                </button>
            </div>
            <!-- 模态框 -->
            <div class="modal fade" id="addChapter">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">

                        <!-- 模态框头部 -->
                        <div class="modal-header">
                            <h4 class="modal-title">添加章节</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>

                        <!-- 模态框主体 -->
                        <div class="modal-body form-group">
                            <p>章节名称</p>
                            <input type="text" v-model="chapterName">
                        </div>

                        <!-- 模态框底部 -->
                        <div class="modal-footer">
                            <button type="button" @keyup.enter="encapsulateChapter" class="btn btn-secondary"
                                    data-dismiss="modal">确认添加
                            </button>
                        </div>

                    </div>
                </div>
            </div>
            <!--模态框 end-->
            <!--添加课件和章节测试-->
            <div class="chapter_content">
                <!--添加课件-->
                <div class="add_courseware">
                    <div class="add_cw_btn">
                        <button class="btn btn-primary butnlocation" data-toggle="modal" data-target="#addCourseware">
                            添加课件
                        </button>
                    </div>
                    <!-- 添加课件模态框 -->
                    <div class="modal fade" id="addCourseware">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">

                                <!-- 模态框头部 -->
                                <div class="modal-header">
                                    <h4 class="modal-title">添加课件</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>

                                <!-- 模态框主体 -->
                                <div class="modal-body form-group">
                                    <p>选择章节</p>
                                    <select class="form-control col-4" v-model="selectChapterIndex">
                                        <option v-for="cp in chapters" :value="cp.orderNum">{{cp.cpname}}</option>
                                    </select>
                                    <table class="table table-hover">
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>课件名称</th>
                                            <th>课件格式</th>
                                            <th>课件时长</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(cw,index) in coursewares">
                                            <td>{{cw.cwid}}</td>
                                            <td>{{cw.cwname}}</td>
                                            <td>{{cw.format}}</td>
                                            <td>{{cw.duration}}</td>
                                            <td>
                                                <button class="btn btn-primary" @click="addNewCourseware(index)"
                                                        data-dismiss="modal">添加
                                                </button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <!-- 模态框底部 -->
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">完成</button>
                                </div>

                            </div>
                        </div>
                    </div>
                    <!-- 添加课件模态框 end-->
                    <!--课件信息表-->
                    <div class="courseware_list">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>课件名称</th>
                                <th>章节名称</th>
                                <th>课件格式</th>
                                <th>课件时长</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(nc,index) in newCoursewares">
                                <td>{{nc.ncid}}</td>
                                <td>{{nc.ncname}}</td>
                                <td>{{nc.cpname}}</td>
                                <td>{{nc.ncformat}}</td>
                                <td>{{nc.duration}}</td>
                                <td>
                                    <button class="btn btn-outline-danger" @click="delCourseware(index)">删除</button>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
                <!--添加章节测试-->
                <div class="add_exam">
                    <div class="exam_btn_div">
                        <button class="btn btn-outline-primary butnlocation" data-toggle="modal" data-target="#addExam">
                            + 添加章节测试
                        </button>
                    </div>
                    <!-- exam模态框 -->
                    <div class="modal fade" id="addExam">
                        <div class="modal-dialog modal-sm">
                            <div class="modal-content">

                                <!-- 模态框头部 -->
                                <div class="modal-header">
                                    <h4 class="modal-title">添加章节测试</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>

                                <!-- 模态框主体 -->
                                <div class="modal-body form-group">
                                    <select class="form-control col-4" v-model="selectExam" @change="addNewExam">
                                        <option v-for="(test,index) in testes" :value="index">
                                            {{index+1}}-{{test.name}}
                                        </option>
                                    </select>
                                </div>

                                <!-- 模态框底部 -->
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">完成</button>
                                </div>

                            </div>
                        </div>
                    </div>
                    <!-- exam模态框 end-->
                    <div class="exam_content_div">
                        <div v-for="(nt,index) in newTestes" class="tag">{{index+1}}-{{nt.name}}<span
                                @click="delTest(index)" style="font-size: 20px;" class="badge">&times;</span></div>
                    </div>
                    <div class="stepto_div">
                        <button @click="gotoStepThree" style="float: right;margin-left: 10px;" class="btn btn-primary">
                            下一步
                        </button>
                        <button @click="gotoStepOne" style="float: right;margin-left: 10px;"
                                class="btn btn-outline-primary">上一步
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第三步：课程设置 block or none -->
    <div class="step" :style="{display:stepThree}">
        <!-- 新增课程的进度样式 ①======②======(③) -->
        <div class="show_step">
            <div @click="gotoStepOne" class="step_div">
                <div class="circle" style="border: 0;">
                    <i class="fa fa-check-circle-o" style="font-size: 50px;color:rgb(24,144,255)"></i>
                </div>
                <span class="step_info" style="color: black">基础信息</span>
            </div>
            <div class="as_line" style="background-color:cornflowerblue;"></div>
            <div class="step_div" @click="gotoStepTwo()">
                <div class="circle" style="border: 0;">
                    <i class="fa fa-check-circle-o" style="font-size: 50px;color:rgb(24,144,255)"></i>
                </div>
                <span class="step_info" style="color: black">课程内容</span>
            </div>
            <div class="as_line" style="background-color:cornflowerblue;"></div>
            <div class="step_div">
                <div class="circle" style="border: 0; background-color: rgb(24,144,255);color: white;">3</div>
                <span class="step_info" style="font-weight: bold;color: black">课程设置</span>
            </div>
        </div>
        <!--设置填写-->
        <div class="course_info">
            <div style="width: 100%;height: 30%;"></div>
            <!--选课方式 单选-->
            <div class="chooseType">
                <div class="settings_name">选课方式:</div>
                <div class="type_div">
                    <input class="radio" name="chstp" type="radio" @change="chooseT(1)">自由选课
                    <input class="radio" name="chstp" type="radio" @change="chooseT(2)">指派选课
                </div>
            </div>
            <!--其他设置 多选-->
            <div class="other_settings">
                <div class="settings_name">其他设置:</div>
                <div class="type_div">
                    <div :class="[openCommentFlag ? checkedStatus : mult_check]" @click="openC">开启评论</div>
                    <div :class="[openLikesFlag ? checkedStatus : mult_check]" @click="openLike">开启点赞</div>
                    <div :class="[openNotesFlag ? checkedStatus : mult_check]" @click="openNote">开启笔记</div>
                    <div :class="[openPushFlag ? checkedStatus : mult_check]" @click="openPush">开启消息推送</div>
                    <div :class="[noHangUpFlag ? checkedStatus : mult_check]" @click="openHangup">禁止挂机</div>
                </div>
            </div>
            <!--按钮-->
            <div class="operation_btn">
                <button @click="gotoStepTwo()" style="margin-right: 10px;" class="btn btn-outline-primary">上一步</button>
                <button style="margin-right: 10px;" class="btn btn-primary" @click="putCourse(1)">发布</button>
                <button style="margin-right: 10px;" class="btn btn-success" @click="putCourse(1)">存草稿箱</button>
            </div>
        </div><!--course_info end-->
    </div>

</div>
<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script src="js/header.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/newCourse.js"></script>
<script>
    $(function () {
        $(".file").change(function () {
            var $file = $(this);
            var objUrl = $file[0].files[0];
            //获得一个http格式的url路径:
            var windowURL = window.URL || window.webkitURL;
            //createObjectURL创建一个指向该参数对象(图片)的URL
            var dataURL;
            dataURL = windowURL.createObjectURL(objUrl);
            $(".upload").css("background", 'url(' + dataURL + ')').css("backgroundSize", "100px 100px");
        });
    });
</script>
</body>
</html>
